<template>
  <div class="app">
    <!-- 轮播图 -->
   <van-swipe style="height:31.25rem" :autoplay="3000">
      <van-swipe-item>
        <a href="#">
          <img src="/img/10001.webp" alt="">
        </a>
      </van-swipe-item>
      <van-swipe-item>
        <a href="#">
          <img src="/img/10002.webp" alt="">
        </a>
      </van-swipe-item>
      <van-swipe-item>
        <a href="#">
          <img src="/img/10003.webp" alt="">
        </a>
      </van-swipe-item>
      <van-swipe-item>
        <a href="#">
          <img src="/img/10004.webp" alt="">
        </a>
      </van-swipe-item>
      <van-swipe-item>
        <a href="#">
          <img src="/img/10005.webp" alt="">
        </a>
      </van-swipe-item>
      <van-swipe-item>
        <a href="#">
          <img src="/img/10006.webp" alt="">
        </a>
      </van-swipe-item>
    </van-swipe>
    <!-- 福利回馈 -->
    <div class="fuli">
      <div class="fuli_1">
        <a href="#"></a>
      </div>
      <div class="fuli_2">
        <a href="#"></a>
      </div>
      <div class="fuli_3">
        <a href="#"></a>
      </div>
      <div class="fuli_4">
        <a href="#"></a>
      </div>
    </div>
    <!-- 优惠券 -->
    <div class="receive">
        <div class="receive_top">
          <img src="/img/10008.webp" alt="">
        </div>
        <div class="receive_coupon">
          <a href="#"><img src="/img/10009.webp" alt=""></a>
          <a href="#"><img src="/img/10010.webp" alt=""></a>
          <a href="#"><img src="/img/10011.webp" alt=""></a>
        </div>
    </div>
    <!--  充值-->
    <div class="skype">
        <div class="skype_top">
          <img src="/img/10012.webp" alt="">
        </div>
        <div class="skype_pay">
          <div class="pay">
            <div class="left">
              <a href="#">
                充200元
              </a>
              <a href="#">
                送10.00元
              </a>
            </div>
            <div class="right">
              <button>立即充值</button>
            </div>
          </div>
          <div class="pay">
            <div class="left">
             <a href="#">
                充400元
              </a>
              <a href="#">
                送30.00元
              </a>
            </div>
            <div class="right">
              <button>立即充值</button>
            </div>
          </div>
          <div class="pay">
            <div class="left">
              <a href="#">
                充800元
              </a>
              <a href="#">
                送88.00元
              </a>
            </div>
            <div class="right">
              <button>立即充值</button>
            </div>
          </div>
          <div class="pay">
            <div class="left">
              <a href="#">
                充1000元
              </a>
              <a href="#">
                送120.00元
              </a>
            </div>
            <div class="right">
              <button>立即充值</button>
            </div>
          </div>

        </div>
    </div>
    <!-- 新人优惠 -->
    <div class="numans">
      <a href="#">
        <img src="/img/10013.webp" alt="">
      </a>
    </div>

    <!-- 轮播图 2-->
     <van-swipe style="height:22.3125rem" :autoplay="3000">
      <van-swipe-item>
        <a href="#">
          <img src="/img/10014.webp" alt="">
        </a>
      </van-swipe-item>
      <van-swipe-item>
        <a href="#">
          <img src="/img/10015.webp" alt="">
        </a>
      </van-swipe-item>
      <van-swipe-item>
        <a href="#">
          <img src="/img/10016.webp" alt="">
        </a>
      </van-swipe-item>
      <van-swipe-item>
        <a href="#">
          <img src="/img/10017.webp" alt="">
        </a>
      </van-swipe-item>
      <van-swipe-item>
        <a href="#">
          <img src="/img/10005.webp" alt="">
        </a>
      </van-swipe-item>
      <van-swipe-item>
        <a href="#">
          <img src="/img/10006.webp" alt="">
        </a>
      </van-swipe-item>
    </van-swipe>
    <!-- 产品 -->
    <div class="product1">
      <div class="product1_1">
        <a href="#"></a>
      </div>
      <div class="product1_2">
        <a href="#"></a>
      </div>
      <div class="product1_3">
        <a href="#"></a>
      </div>
      <div class="product1_4">
        <a href="#"></a>
      </div>
    </div>
    <div class="product2">
      <div class="product2_1">
        <a href="#"></a>
      </div>
      <div class="product2_2">
        <a href="#"></a>
      </div>
      <div class="product2_3">
        <a href="#"></a>
      </div>
      <div class="product2_4">
        <a href="#"></a>
      </div>
    </div>
    <div class="product3">
      <div class="product3_1">
        <a href="#"></a>
      </div>
      <div class="product3_2">
        <a href="#"></a>
      </div>
      <div class="product3_3">
        <a href="#"></a>
      </div>
      <div class="product3_4">
        <a href="#"></a>
      </div>
    </div>
    <!-- 全部产品 -->
    <div class="all_prouduct">
      <a href="#">
        <img src="/img/10021.webp" alt="">
      </a>
    </div>
    <!-- 沙棘原浆 -->
    <div class="sea-buckthorn">
      <a href="#">
        <img src="/img/10022.webp" alt="">
      </a>
    </div>
    <!-- 山楂饮品 -->
    <div class="hawthorn">
      <a href="#">
        <img src="/img/10023.webp" alt="">
      </a>
    </div>
    <!-- 苏打水 -->
    <div class="soda">
      <a href="#">
        <img src="/img/10024.webp" alt="">
      </a>
    </div>
    <!-- 汇源30年 -->
    <div class="quality">
      <img src="/img/10025.webp" alt="">
    </div>
    <!-- 视频 -->
    <div class="video">
      <video poster="/img/10042.webp" width="353" height="198" src="/img/xuanchuan1.mp4" controls></video>
    </div>
    
    <!-- 文字 -->
    <div class="text">
      <img src="/img/01.webp" alt="">
    </div>
    <!-- 底部 -->
    <div class="fotter">
      <div class="ft-links">
            <a href="#">店铺主页</a>
            <span>|</span>
            <a href="#">个人中心</a>
            <span>|</span>
            <a href="#">关注我们</a>
            <span>|</span>
            <a href="#">店铺信息</a>
      </div>
      
      <div class="ft-copyright">
        <img src="img/10041.png" alt="">
      </div>
    </div>

  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.app{
  width:23.4375rem ;
  margin: 0 auto;
  background-color: #f9f9f9;
}
.van-swipe-item img {
  width: 100%;
  display: block;
}
.fuli{
  position: relative;
  height: 23.5625rem;
  background-image: url("../../assets/10007.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  
  .fuli_1{
    width: 10rem;
    height: 9.6875rem;
    // border: 1px solid #000;
    position: absolute;
    top: 3.875rem;
    left: .3125rem;
    a{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
   .fuli_2{
    width: 12.3125rem;
    height: 9.6875rem;
    // border: 1px solid #000;
    position: absolute;
    top: 3.875rem;
    left: 10.625rem;
    a{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
   .fuli_3{
    width: 12.3125rem;
    height: 9.6875rem;
    // border: 1px solid #000;
    position: absolute;
    top: 14.375rem;
    left:.3125rem;
    a{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
   .fuli_4{
    width: 10rem;
    height: 9.6875rem;
    // border: 1px solid #000;
    position: relative;
    top: 14.375rem;
    left: 13.125rem;
    
    a{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
.receive{
    .receive_top{
      img{
        width: 100%;
        display: block;
      }
    }
    .receive_coupon{
      img{
      width: 33.3%;
      // display: block;
      }
    }
}
.skype{
  .skype_top{
      img{
        width: 100%;
        display: block;
      }
  }
  .skype_pay{
    display: flex;
    flex-direction: column;
    .pay{
        height: 66.5px;
        border: 1px solid red;
        background-image: linear-gradient(269deg,#f58357,#e74c2c);
        box-sizing: border-box;
        margin: 5px 10px;
        padding: 10px;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        cursor: pointer;

        .left{
          display: flex;
          flex-direction: column;
          a{
            display: inline-block;
            color: #fff;
          }
        }
        .right{
          button{
            margin-top: 4px;
            border: 0;
            background-image: linear-gradient(0deg,#fff8d9,#ffeeb1);
            color: #4a2214;
            border-radius: 18px;
            width: 96px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            font-weight: 700;
          }
        }
    }    
  }
}
.numans{
  height: 183px;
  img{
    width: 100%;
    display: block;
  }
}
.product1{
  position: relative;
  height: 33.125rem;
  background-image: url(../../assets/10018.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  a{
      display: block;
      width: 100%;
      height: 100%;
    }
  .product1_1{
    width: 9.5rem;
    height: 190px;
    // border: 1px solid #000;
    border-radius: 10px;
    position: absolute;
    top: 6.6875rem;
    left: 1.5625rem;
  }
  .product1_2{
    width: 9.5rem;
    height: 11.875rem;
    // border: 1px solid #000;
    border-radius: 10px;
    position: absolute;
    top: 6.6875rem;
    left: 12.1875rem;
  }
  .product1_3{
    width: 9.5rem;
    height: 11.875rem;
    // border: 1px solid #000;
    border-radius: 10px;
    position: absolute;
    top: 19.5rem;
    left: 1.5625rem;
  }
  .product1_4{
    width: 9.5rem;
    height: 11.875rem;
    // border: 1px solid #000;
    border-radius: .625rem;
    position: absolute;
    top: 19.5rem;
    left: 12.1875rem;
  }
}
.product2{
   position: relative;
  height: 33.125rem;
  background-image: url(../../assets/10019.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
   a{
      display: block;
      width: 100%;
      height: 100%;
    }
  .product2_1{
    width: 9.5rem;
    height: 11.875rem;
    // border: 1px solid #000;
    border-radius: .625rem;
    position: absolute;
    top: 6.6875rem;
    left: 1.5625rem;
  }
  .product2_2{
    width: 9.5rem;
    height: 11.875rem;
    // border: 1px solid #000;
    border-radius: .625rem;
    position: absolute;
    top: 6.6875rem;
    left: 12.1875rem;
  }
  .product2_3{
    width: 9.5rem;
    height: 11.875rem;
    // border: 1px solid #000;
    border-radius: .625rem;
    position: absolute;
    top: 19.5rem;
    left: 1.5625rem;
  }
  .product2_4{
    width: 9.5rem;
    height: 11.875rem;
    // border: 1px solid #000;
    border-radius: .625rem;
    position: absolute;
    top: 19.5rem;
    left: 12.1875rem;
  }
}
.product3{
   position: relative;
  height: 33.125rem;
  background-image: url(../../assets/10020.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
   a{
      display: block;
      width: 100%;
      height: 100%;
    }
  .product3_1{
    width: 9.5rem;
    height: 11.875rem;
    // border: 1px solid #000;
    border-radius: .625rem;
    position: absolute;
    top: 6.6875rem;
    left: 1.5625rem;
  }
  .product3_2{
    width: 9.5rem;
    height: 11.875rem;
    // border: 1px solid #000;
    border-radius: .625rem;
    position: absolute;
    top: 6.6875rem;
    left: 12.1875rem;
  }
  .product3_3{
    width: 9.5rem;
    height: 11.875rem;
    // border: 1px solid #000;
    border-radius: .625rem;
    position: absolute;
    top: 19.5rem;
    left: 1.5625rem;
  }
  .product3_4{
    width: 9.5rem;
    height: 11.875rem;
    // border: 1px solid #000;
    border-radius: .625rem;
    position: relative;
    top: 19.5rem;
    left: 12.1875rem;
  }
}
.all_prouduct{
  width: 100%;
  height: 65px;
  img{
    width: 100%;
    display: block;
  }
}
.sea-buckthorn{
  height: 375px;
  img{
    width: 100%;
    display: block;
  }
}
.hawthorn{
  height: 392px;
  img{
    width: 100%;
    display: block;
  }
}
.soda{
  height: 392px;
  img{
    width: 100%;
    display: block;
  }
}
.quality{
  height: 159px;
  img{
    width: 100%;
    display: block;
  }
}
.video{
  text-align: center;
}
.text{
  height: 22.5rem;
  img{
    width: 100%;
    display: block;
  }
}
.fotter{
  margin-bottom: 50px;
  text-align: center;
  .ft-links{
    // height: 54.5px;
    padding: 24px 15px 10px;
   a{
    padding: 0 6px;
    color: #646566;
    font-size: 12px;
   }
   span{
    color: #e5e5e5;
   }
  }
  .ft-copyright{
    height: 74px;
    line-height: 16px;
   img{
    width: 30%;
    display: block;
    padding: 20px 130px;
   }
  }
}

.seller-icon{
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 115px;
  img{
    width: 100%;
    display: block;
  }
}

</style>